<!DOCTYPE html>

<!--
Present the identification key to the user.
Copyright (C) 2014  P. Cherepanov and E. Batyrova

This program is free software: you can redistribute it and/or modify
it under the terms of the GNU General Public License as published by
the Free Software Foundation, either version 3 of the License, or
(at your option) any later version.

This program is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
GNU General Public License for more details.

You should have received a copy of the GNU General Public License
along with this program.  If not, see <http://www.gnu.org/licenses/>.
-->

<html>
  <head>
    <meta content="text/html; charset=utf-8" http-equiv="content-type">
    <title>Yet Another Interactive Key</title>
  </head>
  <body onload="init()">
    <script>
      function testing() {
        document.getElementById("attrs").innerHTML = "Clicked.";
      }
    </script>
    <p>
      <a>YAIK Home</a>
      <a onclick="testing()">Reset</a>
      <a onclick="special_body_length()">Options</a>
      <a onclick="special_map()">Карта</a>
      <a href="COPYING">Copying</a>
      <a href="about.html">About</a>
    </p>
    <table style="width: 100%" border="1">
      <tbody>
        <tr>
          <td style="width: 20%;">
            <p id="chars">
          </td>
          <td style="width: 60%;">
            <p id="attrs"> </p>
          </td>
          <td style="width: 20%;">
            <p id="specs"> </p>
          </td>
        </tr>
      </tbody>
    </table>
  <script>
    var raw_key = '[ \
      { "sp":"Carabus one L.",\
        "body-length":[1, 2],\
        "body-color": ["red"],\
        "freq": 1\
      },\
      { "sp":"Carabus two M.",\
        "body-length":[1, 3],\
        "body-color": ["red", "orange"],\
        "freq": 1\
      },\
      { "sp":"Carabus three N.",\
        "body-length":[1, 4],\
        "body-color": ["red", "orange", "yellow"],\
        "freq": 1\
      },\
      { "sp":"Carabus four O.",\
        "body-length":[1, 5],\
        "body-color": ["red", "orange", "yellow", "green"],\
        "freq": 1\
      },\
      { "sp":"Carabus five P.",\
        "body-length":[1, 6],\
        "body-color": ["red", "orange", "yellow", "green", "cyan"],\
        "freq": 1\
      },\
      { "sp":"Carabus six Q.",\
        "body-length":[1, 7],\
        "body-color": ["red", "orange", "yellow", "green", "cyan", "blue"],\
        "freq": 1\
      },\
      { "sp":"Carabus seven R.",\
        "body-length":[1, 8],\
        "body-color": ["red", "orange", "yellow", "green", "cyan", "blue", "violet"],\
        "freq": 1\
      }]';
    
    var key = JSON.parse(raw_key);

    var special_chars = {"sp":0};


    var speciens = []
        
    // One level so far
    function merge_2_levels(dst, src) {
        for (var attrname in src) { 
            dst[attrname] = src[attrname];
        }
    }

    // Initialization
    function init() {
      var i, specs = "", chars="", charset = {}

      var freq_sum = 0
      for (i=0; i<key.length; i+=1) {
          freq_sum += key[i].freq;
      }
      for (i=0; i<key.length; i+=1) {
          specs += (key[i].freq/freq_sum).toFixed(2) + " " + key[i].sp + "<br> ";
          merge_2_levels(charset, key[i]); 
      }
      var chars = ""
      for (var attrname in charset) { 
          chars += attrname + "<br>";
      }
      
      
            
      document.getElementById("specs").innerHTML = specs;
      document.getElementById("chars").innerHTML = chars;
    }
    
    // Display body length dialog.
    function special_body_length() {
        var s = '<form>Body length <input type="text"> mm <input type="submit" value="Submit"></form>' 
        document.getElementById("attrs").innerHTML = s;
    }
    // Display map dialog.
    function special_map() {
        var s = '<object type="text/html" data="map.html"><p>Can\'t include map.html</p></object>'
        document.getElementById("attrs").innerHTML = s;
    }
  </script>
  </body>
</html>

